/** @jsxImportSource @emotion/react */
import { jsx } from "@emotion/react";
import theme from "../Theme";
import { storiesOf } from "@storybook/react";
import { Layer } from "../Layer";
import {
    Table,
    TableHead,
    TableCell,
    TableBody,
    TableRow,
    ExpandingRow, Cell, CCell,RCell
} from "../Table";
import { Text } from "../Text";
import { Button } from "../Button";
import { Toolbar } from "../Toolbar";

let id = 0;
function createData(
  name: string,
  calories: number,
  fat: number,
  carbs: number,
  protein: number
) {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
}

const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9)
];

export const TableExamples = storiesOf("Tables", module)
  .add("Minimum size with scroll", () => (
    <div css={{ padding: "48px" }}>
      <Table minWidth="800px">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat (g)</TableCell>
            <TableCell align="right">Carbs (g)</TableCell>
            <TableCell align="right">Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(row => (
            <TableRow key={row.id}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  ))
  .add("Fixed layout", () => (
    <div
      css={{
        minHeight: "100vh",
        background: theme.colors.background.tint2,
        padding: "48px"
      }}
    >
      <Layer elevation="sm" css={{ overflow: "hidden" }}>
        <Toolbar
          css={{
            borderBottom: `1px solid ${theme.colors.border.default}`,
            background: theme.colors.background.tint1,
            justifyContent: "space-between"
          }}
        >
          <Text css={{ margin: 0 }} variant="h4">
            Ingredients
          </Text>

          <div>
            <Button intent="primary">Add ingredient</Button>
          </div>
        </Toolbar>
        <Table minWidth="700px" fixed={["200", "15%", "15%", "15%", "15%"]}>
          <TableHead>
            <TableRow>
              <TableCell>Dessert (100g serving)</TableCell>
              <TableCell align="right">Calories</TableCell>
              <TableCell align="right">Fat (g)</TableCell>
              <TableCell align="right">Carbs (g)</TableCell>
              <TableCell align="right">Protein (g)</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map(row => (
              <TableRow key={row.id}>
                <TableCell component="th" scope="row">
                  {row.name}
                </TableCell>
                <TableCell align="right">{row.calories}</TableCell>
                <TableCell align="right">{row.fat}</TableCell>
                <TableCell align="right">{row.carbs}</TableCell>
                <TableCell align="right">{row.protein}</TableCell>
              </TableRow>
            ))}
            <TableRow>
              <TableCell component="th" scope="row">
                With a really really really stupidly long name
              </TableCell>
              <TableCell align="right">10</TableCell>
              <TableCell align="right">30</TableCell>
              <TableCell align="right">49</TableCell>
              <TableCell align="right">122</TableCell>
            </TableRow>
          </TableBody>
        </Table>
        <Toolbar
          compressed
          css={{
            background: theme.colors.background.tint1
          }}
        />
      </Layer>
    </div>
  ))
  .add("Expanding rows", () => (
    <div
      css={{
        minHeight: "100vh",
        background: theme.colors.background.tint2,
        padding: "48px"
      }}
    >
      <Layer elevation="sm">
        <Toolbar
          css={{
            borderTopRightRadius: theme.radii.lg,
            borderTopLeftRadius: theme.radii.lg,
            borderBottom: `1px solid ${theme.colors.border.default}`,
            background: theme.colors.background.tint1,
            justifyContent: "space-between"
          }}
        >
          <Text css={{ margin: 0 }} variant="h4">
            Ingredients
          </Text>

          <div>
            <Button intent="primary">Add ingredient</Button>
          </div>
        </Toolbar>
        <Table fixed={["200", "15%", "15%", "15%", "15%"]}>
          <TableHead>
            <TableRow>
              <TableCell>Dessert (100g serving)</TableCell>
              <TableCell align="right">Calories</TableCell>
              <TableCell align="right">Fat (g)</TableCell>
              <TableCell align="right">Carbs (g)</TableCell>
              <TableCell align="right">Protein (g)</TableCell>
            </TableRow>
          </TableHead>

          {rows.map(row => (
            <ExpandingRow
              content={close => {
                return (
                  <div
                    css={{
                      padding: theme.spaces.lg,
                      paddingTop: 0,
                      paddingBottom: 0
                    }}
                  >
                    <Text variant="body" css={{ fontSize: theme.fontSizes[0] }}>
                      Officia laborum deserunt adipisicing reprehenderit esse
                      elit exercitation consectetur ad non. Enim reprehenderit
                      mollit in commodo anim ex consequat magna laboris
                      adipisicing esse. Fugiat adipisicing ut consequat ea
                      cupidatat et excepteur sint excepteur cupidatat
                      reprehenderit minim. Labore reprehenderit sint enim cillum
                      exercitation ullamco nisi nostrud laboris ad magna magna
                      officia magna. Officia nisi eiusmod non ea do ullamco anim
                      fugiat proident commodo consectetur ut id. Ea cillum non
                      voluptate ullamco sunt dolore esse mollit.
                    </Text>
                    <div
                      css={{
                        display: "flex",
                        marginTop: "1rem",
                        justifyContent: "flex-end"
                      }}
                    >
                      <Button
                        variant="ghost"
                        css={{ marginRight: theme.spaces.sm }}
                        onClick={close}
                      >
                        Cancel
                      </Button>
                      <Button intent="primary">Save</Button>
                    </div>
                  </div>
                );
              }}
              key={row.id}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </ExpandingRow>
          ))}
        </Table>
        <Toolbar
          compressed
          css={{
            borderBottomRightRadius: theme.radii.lg,
            borderBottomLeftRadius: theme.radii.lg,

            background: theme.colors.background.tint1
          }}
        />
      </Layer>
    </div>
  ))
    .add("RCell对照版", () => (
        <div
            css={{
                minHeight: "100vh",
                background: theme.colors.background.tint2,
                padding: "48px"
            }}
        >
            <Layer elevation="sm">
                <Toolbar
                    css={{
                        borderTopRightRadius: theme.radii.lg,
                        borderTopLeftRadius: theme.radii.lg,
                        borderBottom: `1px solid ${theme.colors.border.default}`,
                        background: theme.colors.background.tint1,
                        justifyContent: "space-between"
                    }}
                >
                    <Text css={{ margin: 0 }} variant="h4">
                        Ingredients
                    </Text>

                    <div>
                        <Button intent="primary">Add ingredient</Button>
                    </div>
                </Toolbar>
                <Table fixed={["200", "15%", "15%", "15%", "15%"]}>
                    <TableHead>
                        <TableRow>
                            <RCell>Dessert (100g serving)</RCell>
                            <CCell css={{border:'none',borderBottom:`1px dashed ${theme.colors.intent.primary.light}`}}>Calories</CCell>
                            <Cell css={{border:'none',borderBottom:`1px dashed ${theme.colors.intent.primary.light}`}}>Fat (g)</Cell>
                            <Cell css={{border:'none',borderBottom:`1px dashed ${theme.colors.intent.primary.light}`}}>Carbs (g)</Cell>
                            <RCell css={{border:'none',borderBottom:`1px dashed ${theme.colors.intent.primary.light}`}}>Protein (g)</RCell>
                        </TableRow>
                    </TableHead>

                    {rows.map(row => (
                        <ExpandingRow
                            content={close => {
                                return (
                                    <div
                                        css={{
                                            padding: theme.spaces.lg,
                                            paddingTop: 0,
                                            paddingBottom: 0
                                        }}
                                    >
                                        <Text variant="body" css={{ fontSize: theme.fontSizes[0] }}>
                                            Officia laborum deserunt adipisicing reprehenderit esse
                                            elit exercitation consectetur ad non. Enim reprehenderit
                                            mollit in commodo anim ex consequat magna laboris
                                            adipisicing esse. Fugiat adipisicing ut consequat ea
                                            cupidatat et excepteur sint excepteur cupidatat
                                            reprehenderit minim. Labore reprehenderit sint enim cillum
                                            exercitation ullamco nisi nostrud laboris ad magna magna
                                            officia magna. Officia nisi eiusmod non ea do ullamco anim
                                            fugiat proident commodo consectetur ut id. Ea cillum non
                                            voluptate ullamco sunt dolore esse mollit.
                                        </Text>
                                        <div
                                            css={{
                                                display: "flex",
                                                marginTop: "1rem",
                                                justifyContent: "flex-end"
                                            }}
                                        >
                                            <Button
                                                variant="ghost"
                                                css={{ marginRight: theme.spaces.sm }}
                                                onClick={close}
                                            >
                                                Cancel
                                            </Button>
                                            <Button intent="primary">Save</Button>
                                        </div>
                                    </div>
                                );
                            }}
                            key={row.id}
                        >
                            <RCell component="th" scope="row">
                                {row.name}
                            </RCell>
                            <CCell css={{border:'none'}}>{row.calories}</CCell>
                            <Cell css={{border:'none',borderBottom:`1px solid ${theme.colors.border.muted}`}}>{row.fat}</Cell>
                            <Cell css={{border:'none',borderBottom:`2px solid ${theme.colors.border.muted}`}}>{row.carbs}</Cell>
                            <RCell css={{border:'none'}}>{row.protein}</RCell>
                        </ExpandingRow>
                    ))}
                </Table>
                <Toolbar
                    compressed
                    css={{
                        borderBottomRightRadius: theme.radii.lg,
                        borderBottomLeftRadius: theme.radii.lg,

                        background: theme.colors.background.tint1
                    }}
                />
            </Layer>
        </div>
    ))
    .add("报告紧凑化", () => (
        <div
            css={{
                minHeight: "100vh",
                background: theme.colors.background.tint2,
            }}
        >
            项目内容及复检结果
            <Table  fixed={ ["5%","11%","%","14%","14%"]  }
                    printColWidth={ ["30","32","410","32","31"] }
                    css={ {borderCollapse: 'collapse',
                     } }
            >
                <TableHead>
                    <TableRow >
                        <CCell>序号</CCell>
                        <CCell>类别/编号</CCell>
                        <CCell>检验不合格内容记录</CCell>
                        <CCell>复检结果</CCell>
                        <CCell>复检日期</CCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    <TableRow >
                        <CCell  css={{
                            [theme.mediaQueries.phone]: {
                                ":first-of-type": {
                                    borderLeft: "none"
                                },
                                ":last-of-type": {
                                    borderRight: "none"
                                }
                            },
                        }} rowSpan={2}
                           component="th" scope="row"
                        >序号</CCell>
                        <CCell>类别/编号</CCell>
                        <CCell>
                            <Table  fixed={ ["17%","33%","16%","%"]  }
                                                       printColWidth={ ["95","110","110","200"] }
                                                       css={ {borderCollapse: 'collapse', height:'fill-available'} }
                            >
                              <TableBody>
                                <TableRow >
                                    <CCell css={{
                                        [theme.mediaQueries.phone]: {
                                            ":first-of-type": {
                                                borderLeft: "none"
                                            },
                                            ":last-of-type": {
                                                borderRight: "none"
                                            }
                                        },
                                    }}
                                           component="th" scope="row"
                                    >额定载重量</CCell>
                                    <CCell>额定载荷  kg</CCell>
                                    <CCell>额定速度</CCell>
                                    <CCell css={{
                                        [theme.mediaQueries.phone]: {
                                            ":first-of-type": {
                                                borderLeft: "none"
                                            },
                                            ":last-of-type": {
                                                borderRight: "none"
                                            }
                                        },
                                    }}>运行速度  m/s</CCell>
                                </TableRow>
                                <TableRow >
                                    <CCell css={{
                                        [theme.mediaQueries.phone]: {
                                            ":first-of-type": {
                                                borderLeft: "none"
                                            },
                                            ":last-of-type": {
                                                borderRight: "none"
                                            }
                                        },
                                    }}>层站数</CCell>
                                    <CCell>电梯层数 层  站   门</CCell>
                                    <CCell>控制方式</CCell>
                                    <CCell css={{
                                        [theme.mediaQueries.phone]: {
                                            ":first-of-type": {
                                                borderLeft: "none"
                                            },
                                            ":last-of-type": {
                                                borderRight: "none"
                                            }
                                        },
                                    }}>控制方式</CCell>
                                </TableRow>
                             </TableBody>
                            </Table>
                        </CCell>
                        <CCell>复检结果</CCell>
                        <CCell  rowSpan={2} css={{
                            [theme.mediaQueries.phone]: {
                                ":first-of-type": {
                                    borderLeft: "none"
                                },
                                ":last-of-type": {
                                    borderRight: "none"
                                }
                            },
                        }}>复检日期</CCell>
                    </TableRow>
                    <TableRow >
                        <CCell css={{
                            [theme.mediaQueries.phone]: {
                                ":first-of-type": {
                                    borderLeft: "none"
                                },
                                ":last-of-type": {
                                    borderRight: "none"
                                }
                            },
                        }}
                           component="th" scope="row"
                        >类别/编号</CCell>
                        <CCell>检验不合格内容记录</CCell>
                        <CCell  css={{
                            [theme.mediaQueries.phone]: {
                                ":first-of-type": {
                                    borderLeft: "none"
                                },
                                ":last-of-type": {
                                    borderRight: "none"
                                }
                            },
                        }}>复检日期</CCell>
                    </TableRow>
                </TableBody>
            </Table>
        </div>
    ));

